<template>
  <div class="evaluation">
    <div class="evaluation-header">
      <h2>心理测评</h2>
      <p class="sub-title">专业的心理健康评估，帮助您更好地了解自己</p>
    </div>
    
    <div class="content" v-loading="loading">
      <!-- 测评量表列表 -->
      <div class="scale-list" v-if="!loading && scales.length > 0">
        <el-row :gutter="20">
          <el-col :span="8" v-for="scale in scales" :key="scale.id">
            <el-card class="scale-card" :body-style="{ padding: '0px' }">
              <div class="scale-content">
                <h3>{{ scale.name }}</h3>
                <p class="description">{{ scale.description }}</p>
                <div class="scale-footer">
                  <el-button type="primary" @click="startAssessment(scale.id)">
                    开始测评
                  </el-button>
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </div>

      <!-- 暂无数据提示 -->
      <el-empty v-if="!loading && scales.length === 0" 
                description="暂无可用的测评量表">
      </el-empty>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import request from '@/utils/request'

const router = useRouter()
const scales = ref([])
const loading = ref(false)

// 获取量表列表
const fetchScales = async () => {
  loading.value = true
  try {
    const res = await request.get('/admin/scales')
    console.log(res)
    scales.value = res.records || []
  } catch (error) {
    console.error('Error fetching scales:', error)
    ElMessage.error('获取量表列表失败')
  } finally {
    loading.value = false
  }
}

// 开始测评
const startAssessment = (scaleId) => {
  router.push(`/evaluation/${scaleId}`)
}

onMounted(() => {
  fetchScales()
})
</script>

<style scoped>
.evaluation {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
  min-height: 400px;  /* 添加最小高度 */
}

.evaluation-header {
  text-align: center;
  margin-bottom: 40px;
}

.sub-title {
  color: #666;
  margin-top: 10px;
}

.scale-list {
  margin-bottom: 40px;
}

.scale-card {
  height: 100%;
  transition: all 0.3s;
}

.scale-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.scale-content {
  padding: 20px;
}

.description {
  color: #666;
  margin: 15px 0;
  min-height: 60px;
}

.scale-footer {
  margin-top: 20px;
  text-align: center;
}
</style> 